<template>

    <view class="path-item">
      <view @tap="showCityPicker">请选择收货人所在城市</view>
      <mpvue-city-picker
        ref="mpvueCityPicker"
        :pickerValueDefault="pickerValueDefault"
        @onChange="onChange"
        @onCancel="onCancel"
        @onConfirm="onConfirm"
      ></mpvue-city-picker>

    </view>

</template>

<script>
import mpvueCityPicker from "mpvue-citypicker";  // 下载npm包
export default {
  data() {
    return {
      pickerValueDefault: [0, 0, 1],
    };
  },
  components: {
    mpvueCityPicker,
  },
  methods: {
    showCityPicker() {
      this.$refs.mpvueCityPicker.show();
    },
    onChange(e) {
      console.log(e);
    },
    onCancel(e) {  // 点击取消
      console.log(e);
    },
    onConfirm(e) {  // 点击确定
      console.log(e);
    }
  },
};
</script>

<style lang="scss" scoped>
 .my-add-path{
 padding-left: 20rpx;
 }
 .path-item{
 display: flex;   justify-content: space-between;   align-items: center;   padding: 16rpx 0;   width: 100%;
 border-bottom: 2rpx solid #cccccc;
 }
 .path-item input{
 flex:1;
 text-align: left;
 padding-left: 10rpx;
 }
</style>
